import React, { lazy } from "react"

const Home = lazy(() => import("@/views/Home"))
const About = lazy(() => import("@/views/About"))
const User = lazy(() => import("@/views/User"))
const Page1 = lazy(() => import("@/views/Page1"))
const Page2 = lazy(() => import("@/views/Page2"))
const Page404 = lazy(() => import("@/views/Page404"))
import { Navigate } from "react-router-dom"


const withLoadingComponent = (component: JSX.Element) => (
    <React.Suspense fallback={<div>loading...</div>}>
        {component}
    </React.Suspense>
)

const routes = [
    {
        path: "/",
        element: <Navigate to="/about" />
    },
    {
        paht: "/",
        element: <Home />,
        children: [
            {
                path: "/about",
                element: withLoadingComponent(<About />)
            },
            {
                path: "/user",
                element: withLoadingComponent(<User />)
            },
            {
                path: "Page1",
                element: withLoadingComponent(<Page1 />),
                children: [
                    {
                        path: "/Page1/page101",
                        element: withLoadingComponent(<Page1 />),
                    },
                    {
                        path: "/Page1/page102",
                        element: withLoadingComponent(<Page1 />),
                    },
                    {
                        path: "/Page1/page103",
                        element: withLoadingComponent(<Page1 />),
                    },
                ],
            },
            {
                path: "/Page2",
                element: withLoadingComponent(<Page2 />),
                children: [
                    {
                        path: "/Page2/page201",
                        element: withLoadingComponent(<Page1 />),
                    },
                    {
                        path: "/Page2/page202",
                        element: withLoadingComponent(<Page1 />),
                    },
                ],
            },
            {
                path: "/404",
                element: withLoadingComponent(<Page404 />)
            }
        ],
    },
    {
        path: "*",
        element: <Navigate to="/404" />
    },
    // {
    //     path: "/home",
    //     element: withLoadingComponent(<Home />)
    // },

]

export default routes